<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
<stripes:layout-render name="/layout/default.jsp" pageTitle="Your Account" loggedIn="true" protoplasm="true">
    <stripes:layout-component name="html_head">
        <script type="text/javascript" language="Javascript" src="${pageContext.request.contextPath}/js/eventcreation.js"></script>
        <script type="text/javascript">
            Protoplasm.use('datepicker');
            Protoplasm.use('livegrid');
            Protoplasm.use('tabstrip');
            Protoplasm.use('upload').transform('#fileUpload');
            Protoplasm.use('expander');
            
            var eventTemplate = new Template("<tr class='appended'><td><label>Invited:</label></td><td>\#{autocomplete}</td></tr>\#{invitees}<tr class='appended'><td><label>Attachments:</label></td><td /></tr>\#{files}");
            
            function ajaxNonSubmit(event){
                addSelections($('ajaxForm'), $('yourSelectedDiv').down('span.livegrid_label'), 'events', '');
                handleAjaxNonSubmit(event, $('ajaxForm'), function(){
                    window.location.reload();
                });
            }
            
            function addSelections(form, elem, prefix, suffix){
                if (elem) {
                    selected = elem.selected
                    if (selected) 
                        selected.each(function(s, ndx){
                            form.appendChild(createHidden(prefix + '[' + ndx + ']' + suffix + '.id', s));
                        });
                }
            }
            
            function upTwoSubmit(event){
                Event.stop(event);
                
                addSelections($('declineForm'), $('declineForm').up(2).next('span.livegrid_label'), 'invites', '.event');
                $('declineForm').submit();
            }
            
            Event.observe(window, 'dom:loaded', function(){
                $$('input.datepicker').each(function(elem){
                    new Control.DatePicker(elem, {
                        timePicker: true,
                        timePickerAdjacent: true,
                    });
                });
                
                $('eventCreateForm').observe('submit', function(event){
                    addSelections($('eventCreateForm'), $('eventCreateForm').next('span.livegrid_label'), 'friends', '');
                });
                $('declineForm').observe('submit', function(event){
                    addSelections($('declineForm'), $('unjumplistInvites').up().up().up().next('span.livegrid_label'), 'invites', '.event');
                });
                $('jumplistInvites').observe('submit', function(event){
                    addSelections($('jumplistInvites'), $('jumplistInvites').up().up().up().next('span.livegrid_label'), 'events', '');
                });
                $('unjumplistInvites').observe('submit', function(event){
                    addSelections($('unjumplistInvites'), $('unjumplistInvites').up().up().up().next('span.livegrid_label'), 'events', '');
                });
                $('viewInvite').observe('submit', function(event){
                    Event.stop(event);
                    
                    selected = $('viewInvite').up().up().up().next('span.livegrid_label').selected
                    if (selected && selected.length > 0) 
                        $('viewInvite').appendChild(createHidden('cal.id', selected[0]));
                    $('viewInvite').submit();
                });
                $('viewEvent').observe('submit', function(event){
                    selected = $('viewEvent').up(3).next(2).down('span.livegrid_label').selected;
                    if (selected && selected.length > 0) 
                        $('viewInvite').appendChild(createHidden('cal.id', selected[0]));
                });
                $('jumplistCals').observe('submit', function(event){
                    addSelections($('jumplistCals'), $('jumplistCals').up().up().next('span.livegrid_label'), 'cals', '');
                });
                $('unjumplistCals').observe('submit', function(event){
                    addSelections($('unjumplistCals'), $('unjumplistCals').up().up().next('span.livegrid_label'), 'cals', '');
                });
                $('viewCalendar').observe('submit', function(event){
                    selected = $('viewEvent').up().up().next('span.livegrid_label').selected;
                    if (selected && selected.length > 0) 
                        form.appendChild(createHidden('cal.id', selected[0]));
                    $('viewEvent').submit();
                });
                
                $$('.ajax-nonsubmit').invoke('observe', 'click', ajaxNonSubmit);
                
                $('removeFriends').observe('click', function(event){
                    form = Event.element(event).up('form');
                    
                    addSelections(form, form.previous('span.livegrid_label'), 'friends', '');
                });
                $('deleteCals').observe('submit', function(event){
                    form = Event.element(event);
                    addSelections(form, $('deleteCalsBreak').next('span.livegrid_label'), 'cals', '');
                })
            });
            
            Event.observe(document, 'csd:finished', function(){
                $$('div.expander').each(function(elem){
                    new Control.Expander(elem);
                });
                
                var tabstrip = new Control.TabStrip($('tabstrip'), {
                    activeClass: 'ui-widget ui-state-active ui-widget-header',
                    disabledClass: 'ui-widget ui-state-default ui-widget-header'
                });
            });
            
            
            var invites = $A();
            
            function onSelect(e, selector){
                var selected = selector.selectedRows();
                var desc = selected.length ? selected.join(', ') : 'None';
                var label = selector.table.up().previous('span');
                label.update('Selected rows: ' + desc);
                label.selected = selected;
            }
            
            function onEventOpen(e, selector){
                var selected = selector.selectedRows()[0];
                var event;
                events_livesort.each(function(elem){
                    if (elem.id == selected) 
                        event = elem;
                });
                
                var form = selector.table.up().next().next().down();
                form.select('tr.appended').invoke('remove');
                
                form.down('#eventEditId').update(event.id);
                form.down('input').value = event.title;
                form.down('textarea').update(event.description);
                form.down('input', 1).checked = event.repeated;
                toggleFrequency('edit');
                if (event.repeated) 
                    form.down('input', 2).value = event.dnr;
                form.down('input', 3).value = event.protoStartTime;
                form.down('input', 4).value = event.protoEndTime;
                form.down('input', 7).value = event.calid;
                form.down('input', 8).value = event.id;
                form.down('select').select('option').each(function(elem){
                    if (elem.value == event.frequency) 
                        elem.selected = true;
                });
                
                invitees = "";
                if (form['id'] == 'eventEditForm') 
                    event.invites.each(function(inv){
                        invitees += inviteTemplate.evaluate({
                            name: inv.fullname,
                            class: 'appended',
                            action: '${pageContext.request.contextPath}/action/account/revoke/' + event.id + '/' + inv.id,
                            ajax: false
                        });
                    });
                
                files = "";
                event.files.each(function(file){
                    files += rowTemplate.evaluate({
                        class: 'appended',
                        name: fileTemplate.evaluate({
                            href: file.href,
                            filename: file.filename
                        })
                    });
                });
                
                auto = form['id'] == 'eventEditForm' ? autoTemplate.evaluate() : '';
                Element.extend(auto);
                var lastInsert = eventTemplate.evaluate({
                    invitees: invitees,
                    files: files,
                    autocomplete: auto
                });
                
                form.down('table').insert({
                    bottom: lastInsert
                });
                
                $$('input.autocomplete').each(function(elem){
                    new Ajax.Autocompleter(elem, elem.next('.results'), "${pageContext.request.contextPath}/action/auto", {
                        minChars: 3,
                        frequency: .5,
                    });
                });
                
                if (form['id'] != 'eventEditForm') 
                    form.disable();
                form.up().appear();
            }
            
            function onCalendarOpen(e, selector){
                window.location = '${pageContext.request.contextPath}/account/Calendar.action?cal.id=' + selector.selectedRows()[0];
            }
        </script>
    </stripes:layout-component>
    <stripes:layout-component name="contents">
        <br/>
        <div id = "tabstrip" class="ui-widget">
            <ul class="ui-tabs ui-tabs-nav ui-widget ui-widget-header"">
                <li id="accountTab" class="ui-widget ui-state-default ui-widget-content">Account</li>
                <li id="newEventTab" class="ui-widget ui-state-default ui-widget-content">New Event</li>
                <li id="manageEventsTab" class="ui-widget ui-state-default ui-widget-content">Manage Events</li>
                <li id="manageCalsTab" class="ui-widget ui-state-default ui-widget-content">Manage Calendars</li>
                <li id="manageFriendsTab" class="ui-widget ui-state-default ui-widget-content">Manage Friends</li>
            </ul>
            <div class="ui-widget ui-widget-content">
                <div class="ui-widget ui-widget-content">
                    <div id="changeAccountDiv" style="display: none;" class="ui-widget ui-widget-content ui-corner-bottom ui-accordion-content-active">
                        <stripes:form beanclass="durst.action.account.ManageAccountActionBean" id="passwordAjaxForm">
                            <table class="ui-widget ui-widget-content" style="border-width: 0px;">
                                <tr>
                                    <td>
                                        <label>Current Password:</label>
                                    </td>
                                    <td>
                                        <stripes:password name="current" maxlength="20"/>
										<stripes:errors field="current" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>New Password: </label>
                                    </td>
                                    <td>
                                        <stripes:password name="newpass" maxlength="20"/>
										<stripes:errors field="newpass" />
                                    </td>
                                    <td>
                                        <div class="tip">Must be at least 6 characters</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>Confirm: </label>
                                    </td>
                                    <td>
                                        <stripes:password name="confirm" maxlength="20"/>
										<stripes:errors field="confirm" />
                                    </td>
                                </tr>
                                <tr>
                                    <td/>
                                    <td>
                                        <stripes:submit name="alter" value="Change Password" class="button brown"/>
                                    </td>
                                </tr>
                            </table>
                        </stripes:form>
                    </div>
                    <table class="ui-widget ui-widget-content" style="border-width: 0px;">
                        <tr>
                            <td>
                                <label>Details for Account #:</label>
                            </td>
                            <td>${account.id}</td>
                        </tr>
                        <tr>
                            <td>
                                <label>Username: </label>
                            </td>
                            <td>${account.username}</td>
                        </tr>
                        <tr>
                            <td>
                                <label>Email: </label>
                            </td>
                            <td>${account.email}</td>
                        </tr>
                        <tr>
                            <td/>
                            <td>
                                <a href="#" onclick="Lightview.show('#changeAccountDiv');">Change Password</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="eventCreationDiv" class="ui-widget ui-widget-content">
                    <stripes:form beanclass="durst.action.account.EventCreateActionBean" id="eventCreateForm">
                        <stripes:hidden name="ajax" value="false" />
                        <table class="ui-widget ui-widget-content" style="border-width: 0px;">
                            <tr>
                                <td colspan="3">
                                    <stripes:errors globalErrorsOnly="true"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>For Calendar:</label>
                                </td>
                                <td>
                                    <stripes:select name="cal.id">
                                        <jsp:include page="/action/include/calendars/self">
                                            <jsp:param name="select" value="true" />
                                        </jsp:include>
                                    </stripes:select>
									<stripes:errors field="cal.id" />
                                </td>
                            </tr>
                            <jsp:include page="/account/includes/eventform_fragment.jsp">
                                <jsp:param name="submit" value="Submit" /><jsp:param name="action" value="create" />
                            </jsp:include>
                            <tr>
                                <td/>
                                <td>
                                    <stripes:file name="file" id="fileUpload"/>
									<stripes:errors field="file" />
                                </td>
                            </tr>
                        </table>
                    </stripes:form>
                    <jsp:include page="/action/include/friends/">
                        <jsp:param name="first" value="true" /><jsp:param name="prefix" value="invite_" /><jsp:param name="onselect" value="onSelect" /><jsp:param name="variable" value="friends" />
                    </jsp:include>
                </div>
                <div class="ui-widget ui-widget-content">
                    <div class="expander">
                        <span>
                            <label>Your Events:</label>
                        </span>
                        <div>
                            <br/>
                            <ul style="list-style: none;">
                                <li style="display: inline;">
                                    <stripes:form beanclass="durst.action.account.CalendarActionBean" id="viewEvent">
                                        <stripes:submit name="view" value="View Event" style="float: left;" class="button brown"/>
                                    </stripes:form>
                                </li>
                                <li style="display: inline;">
                                    <button onclick="Lightview.show('#deleteEventDiv')" class="button brown" style="float: left; margin-left: 45px; display: none;" id="deleteSelectedEvents">Delete Selected Events</button>
                                </li>
                            </ul>
                            <div id="yourSelectedDiv">
                                <br/>
                                <jsp:include page="/action/include/events/">
                                    <jsp:param name="first" value="true" /><jsp:param name="prefix" value="events_" /><jsp:param name="variable" value="events" /><jsp:param name="show" value="deleteSelectedEvents" /><jsp:param name="onselect" value="onSelect" /><jsp:param name="onrow" value="onEventOpen" />
                                </jsp:include>
                                <div style="display: none;" id="eventEdit">
                                    <stripes:form beanclass="durst.action.account.EventEditActionBean" id="eventEditForm">
                                        <table class="ui-widget ui-widget-content" style="border-width: 0px;">
                                            <tr>
                                                <td colspan="3">
                                                    <stripes:errors globalErrorsOnly="true"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label>Event id:</label>
                                                </td>
                                                <td>
                                                    <span id="eventEditId" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label>For Calendar:</label>
                                                </td>
                                                <td>
                                                    <stripes:select name="event.parent.id">
                                                        <jsp:include page="/action/include/calendars/self">
                                                            <jsp:param name="select" value="true" />
                                                        </jsp:include>
                                                    </stripes:select>
													<stripes:errors field="event.parent.id" />
                                                </td>
                                            </tr>
                                            <jsp:include page="/account/includes/eventform_fragment.jsp">
                                                <jsp:param name="submit" value="Edit" /><jsp:param name="action" value="edit" /><jsp:param name="prefix" value="edit" />
                                            </jsp:include>
                                            <tr>
                                                <td/>
                                                <td>
                                                    <stripes:file name="file" id="fileUpload"/>
													<stripes:errors field="file" />
                                                </td>
                                            </tr>
                                        </table><stripes:hidden name="event.id" />
                                    </stripes:form>
                                </div>
                            </div>
                            <div id="deleteEventDiv" style="display: none;">
                                <jsp:include page="/account/EventDelete.action?form" />
                            </div>
                        </div>
                    </div>
                    <br/>
                    <hr/>
                    <div class="expander">
                        <span>
                            <label>Invited Events:</label>
                        </span>
                        <div>
                            <div style="display: none;" id="inviteButtons" />
                                <br/>
                                <ul style="list-style: none;">
                                    <li style="display: inline;">
                                        <stripes:form beanclass="durst.action.account.DeclineInvitationAction" id="declineForm">
                                            <stripes:submit name="decline" value="Decline Selected Invites" style="float: left;" class="button brown"/>
                                        </stripes:form>
                                    </li>
                                    <li style="display: inline;">
                                        <stripes:form beanclass="durst.action.account.JumplistAction" id="jumplistInvites">
                                            <stripes:hidden name="jumplist" value="true" />
                                            <stripes:submit name="handle" value="Jumplist Selected Invites" style="float: left;" class="button brown"/>
                                        </stripes:form>
                                    </li>
                                    <li style="display: inline;">
                                        <stripes:form beanclass="durst.action.account.JumplistAction" id="unjumplistInvites">
                                            <stripes:hidden name="jumplist" value="false" />
                                            <stripes:submit name="handle" value="Un-Jumplist Selected Invites" style="float: left;" class="button brown"/>
                                        </stripes:form>
                                    </li>
                                    <li style="display: inline;">
                                        <stripes:form beanclass="durst.action.account.CalendarActionBean" id="viewInvite">
                                            <stripes:submit name="view" value="View Invite" style="float: left;" class="button brown"/>
                                        </stripes:form>
                                    </li>
                                </ul>
                            </div>
                            <br/>
                            <jsp:include page="/action/include/events/invited">
                                <jsp:param name="first" value="true" /><jsp:param name="prefix" value="invited_" /><jsp:param name="onselect" value="onSelect" /><jsp:param name="onrow" value="onEventOpen" /><jsp:param name="show" value="inviteButtons" /><jsp:param name="variable" value="invited" />
                            </jsp:include>
                            <div style="display: none;">
                                <stripes:form beanclass="durst.action.account.EventEditActionBean">
                                    <table class="ui-widget ui-widget-content" style="border-width: 0px;">
                                        <tr>
                                            <td colspan="3">
                                                <stripes:errors/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label>Event id:</label>
                                            </td>
                                            <td>
                                                <span id="eventEditId" />
                                            </td>
                                        </tr>
                                        <jsp:include page="/account/includes/eventform_fragment.jsp">
                                            <jsp:param name="prefix" value="view" />
                                        </jsp:include>
                                    </table><stripes:hidden name="cal.id" /><stripes:hidden name="event.id" />
                                </stripes:form>
                            </div>
                        </div>
                    </div>
                    <br/>
                </div>
                <div class="ui-widget ui-widget-content">
                    <div style="display: none;" id="jumplistButtons" />
                        <ul style="list-style: none;">
                            <li style="display: inline;">
                                <stripes:form beanclass="durst.action.account.JumplistAction" id="jumplistCals">
                                    <stripes:hidden name="jumplist" value="true" />
                                    <stripes:submit name="handle" value="Jumplist Selected Calendars" style="float: left;" class="button brown"/>
                                </stripes:form>
                            </li>
                            <li style="display: inline;">
                                <stripes:form beanclass="durst.action.account.JumplistAction" id="unjumplistCals">
                                    <stripes:hidden name="jumplist" value="false" />
                                    <stripes:submit name="handle" value="Un-Jumplist Selected Calendars" style="float: left;" class="button brown"/>
                                </stripes:form>
                            </li>
                            <li style="display: inline;">
                                <stripes:form action="/" partial="true">
                                    <stripes:button name="handle" value="Delete Selected Calendars" style="float: left;" onclick="Lightview.show('#deleteCalsConfirm');" class="button brown"/>
                                </stripes:form>
                            </li>
                            <li style="display: inline;">
                                <stripes:form beanclass="durst.action.account.CalendarActionBean" id="viewCalendar">
                                    <stripes:submit name="view" value="View Calendar" style="float: left;" class="button brown"/>
                                </stripes:form>
                            </li>
                        </ul>
                        <br/>
                    </div>
                    <br id="deleteCalsBreak" />
                    <jsp:include page="/action/include/calendars/">
                        <jsp:param name="first" value="true" /><jsp:param name="prefix" value="calendar_" /><jsp:param name="json" value="true" /><jsp:param name="onselect" value="onSelect" /><jsp:param name="jumplist" value="false" /><jsp:param name="onrow" value="onCalendarOpen" /><jsp:param name="show" value="jumplistButtons" /><jsp:param name="variable" value="calendars" />
                    </jsp:include>
                    <div id="deleteCalsConfirm" style="display: none;">
                        <stripes:form beanclass="durst.action.account.DeleteCalendarAction" id="deleteCals">
                            <p>Are you certain you want to delete the selected Calendars?</p>
                            <stripes:submit name="confirm" value="Yes" />
                        </stripes:form>
                    </div>
                </div>
                <div class="ui-widget ui-widget-content">
                    <jsp:include page="/action/include/friends/">
                        <jsp:param name="prefix" value="friends_" /><jsp:param name="onselect" value="onSelect" /><jsp:param name="fireFinish" value="true" /><jsp:param name="show" value="removeButtons" /><jsp:param name="variable" value="friends" />
                    </jsp:include>
                    <stripes:form beanclass="durst.action.account.RemoveFriendsAction" style="display: none;" id="removeButtons">
                        <stripes:submit name="remove" value="Remove Selected Friends" id="removeFriends" class="button brown" />
                    </stripes:form>
                    <stripes:form beanclass="durst.action.account.AddFriendAction">
                        <table class="ui-widget ui-widget-content" style="border-width: 0px;">
                            <tr>
                                <td>
                                    <label>New Friend:</label>
                                </td>
                                <td>
                                    <stripes:text name="friend" />
									<stripes:errors field="friend" />
                                </td>
								<td><span class="cal-tip">Enter username or email</span></td>
                            </tr>
                            <tr>
                                <td/>
                                <td>
                                    <stripes:submit name="add" value="Add Friend" id="addfriendsubmit" class="button brown" />
                                </td>
                            </tr>
                        </table>
                    </stripes:form>
                </div>
            </div>
        </div>
    </stripes:layout-component>
</stripes:layout-render>